import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	withRouter
} from 'react-router-dom';
import {
	RouteLayout
} from 'weaver-mobile-page';
import {
	Icon,
	Tools,
	Schedule,
	Timeline,
	WingBlank,
} from 'weaver-mobile';
import {isEmpty} from 'lodash';
import Dot from "./Dot";
import IconDot from "./IconDot";
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Calender extends Component {
	componentWillUnmount() {
		const {
			changeTitle,
			mainTitle
		} = this.props.store;

		changeTitle(mainTitle);
	}
	
	render() {
		const {
			store
		} = this.props, {
			dateExtra,
			signInfo,
			handleScheduleSelect,
			serialInfo,
			signWorkflowInfo,
			showWorkflow,
			openWorkflow,
			defaultDate,
			loadCalenderInfo,
		} = store;

		return (
			<RouteLayout>
				<div key="wmPoutePageDemo" className="wm-route-layout wm-demo-route-layout-page attendance-schedule">
					<div>
						<Schedule 
							defaultDate={new Date(defaultDate)}
							weekStart={7}
							dateExtra={dateExtra}
							onSelect={handleScheduleSelect}
							onMonthChange={loadCalenderInfo}
						/>
						<div className="schedule-sign-wrap">
							<Timeline>
								{
									!isEmpty(signInfo) && (
										<Timeline.Item dot={<IconDot />}>
											<span className="sign-serial">{serialInfo}</span>
										</Timeline.Item>
									)
								}
								{
									!isEmpty(signInfo) ? signInfo.map( (info,index) => {
										const {item, status, needWorkFlow} = info;
										return (
											<Timeline.Item key={index} dot={<Dot />}>
												<ul className="attendance-schedule-sign">
													{
														item.map((item,index) => {
															const {title, value} = item;
															return (
																<li key={index}>
																	<div className="schedule-sign-item">
																		<div>{`${title}: `}</div>
																		<div className="sign-item-value">
																			<div>{value}</div>
																			{
																				status && (index === 0) && <div className={`schedule-sign-status ${needWorkFlow ? "status-abnormal" : "status-noraml"}`}>{status}</div>
																			}
																		</div>
																	</div>
																</li>
															)
														})
													}
													{
														needWorkFlow && <li className="schedule-sign-workflow" onClick={() => showWorkflow()}>{`${getLabel(132023,"提交考勤流程")}>>`}</li>
													}
												</ul>
											</Timeline.Item>
										)
									}) : <p>{getLabel(386472,"当天没有考勤数据")}</p>
								}
							</Timeline>
							{
								!isEmpty(signWorkflowInfo) && (
									<div className="attendance-workflow">
										<div className="attendance-workflow-title">
											<Icon type="collaboration-application-unselected" size="xxs"/>
											<span>{getLabel(500272,"考勤流程")}</span>
										</div>
										{
											signWorkflowInfo.map(info => {
												const {
													title,
													period,
													requestId
												} = info;

												return (
													<div className="attendance-workflow-brief" key={requestId} onClick={()=>openWorkflow(requestId)}>
														<div className="workflow-brief-left">
															<div>{title}</div>
															<div>{period}</div>
														</div>
														<div className="workflow-brief-right">
															<Icon type="right" size="md" />
														</div>
													</div>
												)
											})
										}
									</div>
								)
							}
						</div>
					</div>
				</div>
			</RouteLayout>
		);
	}
}
